<template>
  <div class="form-container">
    <el-card class="form-card">
      <el-form ref="formRef" :model="user" label-width="120px" label-position="right" class="form-content">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="用户名称" prop="yhm" :rules="[{required: true, message: '请输入用户名称', trigger: 'blur'}]">
              <el-input v-model="user.yhm" placeholder="用户名称" disabled size="large"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="密码" prop="pwd">
              <el-input v-model="user.pwd" placeholder="请输入密码(选填)" type="password" size="large"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="sjh" :rules="[{required: true, message: '请输入手机号', trigger: 'blur'}]">
              <el-input v-model="user.sjh" placeholder="请输入手机号" size="large"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="user.age" placeholder="请输入年龄" size="large"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别">
              <el-radio-group v-model="user.sex">
                <el-radio :label="'1'">男</el-radio>
                <el-radio :label="'0'">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="form-actions">
          <el-space size="medium">
            <el-button type="primary" size="large" @click="doSave" icon="Check">保存</el-button>
            <el-button type="default" size="large" @click="doCancel" icon="Close">取消</el-button>
          </el-space>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>
.form-container {
  padding: 20px;
}

.form-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.form-content {
  padding: 20px 20px 0;
}

.form-actions {
  text-align: center;
  padding: 20px;
  margin-top: 10px;
  border-top: 1px solid #f5f5f5;
}
</style>

<script setup lang="ts">
import {ref} from 'vue';
import {ElMessage, FormInstance} from 'element-plus'
import axios from 'axios';

const formRef = ref<FormInstance>();
// 表单数据
const user = ref({
    id: '',
    yhm: '',  // 改为后端实体类的属性名
    pwd: '',  // 改为后端实体类的属性名
    sjh: '',  // 改为后端实体类的属性名
    age: '',
    sex: '1'  // 改为后端实体类的属性名和类型
})

// 接收父组件传递的数据
const handleUpdateData = (obj) => {
    user.value = {...obj};
}

// 暴露给父组件使用的方法
defineExpose({
    handleUpdateData
})

// 保存
const doSave = async () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            const { data } = await axios.put(`/api/user/${user.value.id}`, user.value);

            if (data.success) {
                ElMessage.success('更新成功');
                emits('flushPage');
                emits('closeDialog');
            } else {
                ElMessage.error(data.message || '更新失败');
            }
        }
    })
}

// 取消
const doCancel = () => {
    emits('closeDialog');
}

// 定义组件的输出事件
const emits = defineEmits(['flushPage', 'closeDialog']);
</script>